<template>
  <div class="sign">
    <div class="sign-header">
      <router-link to="/sign" tag="span" class="iconfont icon-arrow-left-bold"></router-link>
      <span>帮助</span>
    </div>
    <div class="sign-content">
      <div class="des">
        <h2>手机号密码登录</h2>
      </div>
      <div class="sign-box">
        <div class="sele">
          <select class="sele-controll" v-model="telErea">
            <option value>+86</option>
          </select>
        </div>
        <div class="inp">
          <input @keyup="loginAction" type="text" v-model="phone" class="imp-controll" placeholder="请输入手机号" />
        </div>
      </div>
       <div class="sign-box">
        <!-- <div class="sele">
          <select class="sele-controll" v-model="telErea">
            <option value>+86</option>
          </select>
        </div> -->
        <div class="inp">
          <input type="password" @keyup="loginAction" v-model="password" class="imp-controll" placeholder="请输入密码" />
        </div>
      </div>
        <div class="not-sign">
                  <p>
          登录即表明同意
          <a href="javascript:;">抖音协议</a>和
          <a href="javascript:;">隐私协议</a>
        </p>
        </div>
        <div class="code-btn">
          <button @click="loginAction" :disable="disabled" :class="btnBg?'active':''" >登录</button>
        </div>
        <div class="other">
            <span>忘记了?<a href="javascript:;">忘记密码</a></span>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            telErea:'',
            phone:'',
            password:'',
            disabled:true,
            btnBg:''
        }
    },
    methods:{
        loginAction(){
             var regtel = /^1[3456789]\d{9}$/;
             if(this.phone==""){
                 this.$toast('手机号不能为空')
             }else if(!regtel.test(this.phone)){
                //  console.log('请输入正确的手机号'),
                 this.$toast({
                   message:'请输入正确的手机号',
                   type:'error',
                   duration:3000
                 })
             }else if(this.password ==""){
                  this.$toast({
                   message:'密码不能为空',
                   type:'error',
                   duration:3000
                 })
                 this.disabled = true;
                 this.btnBg = false
                 return
             }else{
                 this.disabled = false;
                 this.btnBg = true
             }
        },
    }
};
</script>
<style  scoped>
.sign {
  padding: 30px;
}
.sign-header{
    display: flex;
    justify-content: space-between;
}
.sign-header .icon{
    font-size: 30px;
}
.sign-content{
    padding:  40px 10px;
}
.des{
    margin-bottom: 30px;
}
.des h2{
    font-size: 24px;
    font-weight: bold;
    color: black;
}
.des p{
    line-height: 50px;
    color: #666;
}
.des,.not-sign p a{
    color: #628db8;
    /* padding: 0 5px; */
}
.sign-box{
    display: flex;
    height: 50px;
    align-items: center;
    background-color: #f9f9f9;
    margin-top: 12px;
}
.sele-controll{
    background-color: #F9F9F9;
    height: 36px;
    font-weight: bold;
    margin-left: 5px;
    border: none;
}
.inp-controll{
    height: 36px;
    background-color: #f9f9f9;
    border: none;
    width: 90%;
    margin-left: 10px;
}
input{
    caret-color: #FE2C55;
    outline:none; 
    border: none;
    background: #f9f9f9;
}
input::-webkit-input-placeholder{
    color: #ccc;
    background: #f9f9f9;
}
.not-sign p{
    color: #ccc;
    font-size: 14px;
    margin-top: 10px;
}
.code-btn button{
    margin:20px 0;
    width: 100%;
    padding: 10px 0;
    border: none;
    color: white;
}
.code-btn .active{
    color:#ffffff;
    background-color: #FE2C55;
}
.other{
    color: #ccc;
}
.other a{
    color: #628db8;
}
</style>>

